<template>
  <p>这是Home页面</p>
  <h1>js路由跳转</h1>
  <button @click="pushStr">字符串</button>
  <button @click="pushPath">pushPath跳转</button>
  <button @click="pushPathQuery">pushPathQuery跳转</button>
  <button @click="pushName">pushName跳转</button>
  <button @click="pushNameParams">pushNameParams跳转</button>
  <h1>这是修改count页面</h1>
  <button @click="updateVuexCount">修改count的值</button>
  <h1>Vuex module</h1>
  <button @click="commitIncreaseA">触发-moduleA-muations</button>
  <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
  <button @click="commitIncreaseB">触发-moduleB-muations</button>
  <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>
  <button @click="getCount">action接口请求</button>
  <button @click="getCountByObj">触发-getCountByObj-actions</button>
  <button @click="moduleComGloMut">触发moduleComGloMut请求</button>
  <button @click="moduleComGloAct">触发moduleComGloAct</button>
  <h1>命名空间</h1>
  <p>无命名空间</p>
  <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
  <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>
  <p>有命名空间</p>
  <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
  <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p>
</template>



<script>
export default {
  methods: {
    pushStr() {
      this.$router.push("/about")
    },
    pushPath() {
      this.$router.push({ path: '/about' })
    },
    pushPathQuery() {
      this.$router.push({ path: '/about', query: { name: 'tom' } })
    },
    pushName() {
      this.$router.push({ name: 'about' })
    },
    pushNameParams() {
      this.$router.push({ name: 'about', parms: { id: 1, name: 'tom' } })
    },
    updateVuexCount() {
      this.$store.commit('incrementMut', { count: 200 })
    },
    updateVuexCount() {
      this.$store.commit('incrementAct', { count: 200 })
    },
    getCount() {
      this.$store.dispatch('incrementAct', { count: 200 })
    },
    getCountByObj() {
      this.$store.commit({
        type: 'incrementAct',
        count: 200
      })
    },
    moduleComGloMut() {
      this.$store.dispatch('b/asyncGloBalMut', { count: 5000 })
    },
    moduleComGloAct() {
      this.$store.dispatch('b/asyncGloBalAct', { count: 5000 })
    },
    updateVuexCountByObj() {
      this.$store.commit({
        type: 'incrementMut',
        count: 30
      })
    },
    updateVuexCountByObj() {
      this.$store.commit({
        type: 'incrementAct',
        count: 30
      })
    },
    commitIncreaseA() {
      this.$store.commit('increaseA')
    },
    commitAsyncIncreaseA() {
      this.$store.dispatch('asyncIncreaseA')
    },
    commitIncreaseB() {
      this.$store.commit('b/increaseB')
    },
    commitAsyncIncreaseB() {
      this.$store.dispatch('b/asyncIncreaseB')
    },

  },

  mounted() {
    console.log("this.$route", this.$route);
    console.log("this.$router", this.$router);
  },

};
</script>